import React from 'react';
import {InputItem, Button} from 'antd-mobile';
import Form from './index';

class Test extends React.Component {
  render() {
    return (
      <Form>
        <Form.Item
          that={this}
          formId="user"
          formConfig={{
            rules: [{required: true}]
          }}
          formChild={<InputItem type="phone">用户</InputItem>}
        />
        <Form.Item
          that={this}
          formId="password"
          formConfig={{
            rules: [{required: true}]
          }}
          formChild={<InputItem type="password">密码</InputItem>}
        />
        <Form.Item>
          <Button type="primary" onClick={this.handleSubmit}>
            submit
          </Button>
        </Form.Item>
      </Form>
    );
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
}

/**
 * 使用Form.create()，从而在组件中使用this.props.form进行表单操作
 */
export default Form.create()(Test);
